<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="UTF-8">
	<?=css('bootstrap/css/bootstrap');?>
	
<style type="text/css">
.control{

	margin-bottom: 10px;
	margin:2px;
	padding:5px;
	background: #eeeeee;
	border-bottom: 2px #dddddd solid;
	text-align: right;
}
.control .btn{
	margin: 0px 10px;
}
#container-map-area{
	border:2px dashed #333333;
	padding: 5px;
	background: rgba(121, 121, 122, 0.42);
}
.map-aera {
	overflow: hidden;
	position: relative;
	background-size: 100% 100%;
	background-image: url("<?= base_url(IMAGE_PATH.$img_path) ?>");
	width: <?=$img_width ?>px;
	height: <?=$img_height?>px;
	margin: auto;
}

.rect {
	width: 100px;
	height: 100px;
	border: #F00 1px solid;
	background: rgba(255, 107, 107, 0.7);
}

.rect.active {
	border: #F00 1px dotted;
	background: rgba(255, 107, 107, 0.5);
	z-index: 100;
}

.resize {
	width: 10px;
	height: 10px;
	background: #F00;
	cursor: se-resize;
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.prop {
	min-width: 314px;
	border: 1px #333 solid;
	background: #eeeeee;
	z-index: 102;
	overflow: hidden;
}

.prop .header {
	background: #f39c12;
	cursor: move;
	padding: 2px 2px;
}
.prop .header span{
	color: #333333;
	font-size: 15px;
	font-family: sans-serif;
}
.prop .header a {
	color: #223;
	font-size: 18px;
	text-decoration: none;
	float: right;
}

.prop .body {
	padding: 5px;
	padding-bottom: 20px;
}
.prop .body table{
	border-spacing: 0px;
	border-collapse: collapse;
}

.prop .body table tr{
	padding: 0px;
	margin: 0px;
}
.prop .body table td{
	padding:5px;
	border-bottom: 1px solid #D1CCCC;
	border-top: #ffffff solid 1px;
}
.prop .body table td:first-child{
	border-right: 1px solid #D1CCCC;
}
.prop .body table td:last-child{
	border-left: #ffffff solid 1px;
}

.prop .body input[type="text"],
.prop .body input[type="file"]
 {
 	width:100%;
	min-width: 210px;
	height: 20px;
	padding: 2px;
}
.prop .body select{
	width:100%;
	min-width: 218px;
	margin-top: 5px;
	height: 25px;
	padding: 5px;
}
.prop #extern-url{
	height: 17px;
}
.prop .body textarea{
	width: 210px;
	padding: 2px;
}
.prop .footer {
	text-align: center;
	background: #DDDDDD;
	border-top: #bbbbbb;
	padding: 3px 0px; 
}

.hidden {
	display: none;
}

.context-menu {
	width: 120px;
	border: 1px #333 solid;
	background: #eee;
	position: absolute;
	z-index: 103;
	font-size: 14px;
}

.context-menu ul {
	list-style: none;
	padding: 0px;
	margin: 3px;
	padding-left: 20px;
}

.context-menu ul li {
	cursor: pointer;
	padding: 5px 0px;
}

.shadow {
	-moz-box-shadow: 0px 7px 15px 1px #656565;
	-webkit-box-shadow: 0px 7px 15px 1px #656565;
	-o-box-shadow: 0px 7px 15px 1px #656565;
	box-shadow: 0px 7px 15px 1px #656565;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565,
		Direction=180, Strength=15);
}

</style>
</head>
<body>
	
	<div class="control">
		<button id="save-all" class="btn btn-primary ">Envoyer <pan id="loading hidden" ></pan></button>
		<button id="delete-all" class="btn">Effacer Tout</button>
	</div>
	<div id="container-map-area">
		<div class="map-aera" data-img-id="<?= $img_id;?>" ></div>
	</div>
	

	<div class="context-menu shadow hidden">
		<ul>
			<li id="create-rect">Create Rect</li>
			<li id="delete-rect">delete</li>
		</ul>
	</div>

	<div class="resize hidden"></div>
	<div class="prop shadow hidden ">
		<div class="header">
			<span>Proprietés</span>
			<a href="#">&timesb;</a>
		</div>
		<div class="body">
			<table  >
				<tr>
					<td>Titre</td>
					<td><input type="text" name="title" id="title"></td>

				</tr>
				<tr>
					<td>Url</td>
					<td>
					<input type="text" id="extern-url">
					<br>
					<select name="url" id="url">
						<option selected value="#" >Aucun</option>
						<?php foreach ($slides as $img):?>
							<option value="<?= split_name($img['code'] , TAG_NAME ); ?>"><?= $img['title']; ?></option>
						<?php endforeach;?>
					</select>
					
					</td>

				</tr>
				<tr>
					<td>coords</td>
					<td><input type="text" name="coords" readonly id="coords"></td>
				</tr>
				<tr>
					<td>Description</td>
					<td class="desc-content"><textarea rows="5" name="desc" id="desc" ></textarea></td>
				</tr>
			</table>
		</div>
		<div class="footer">
			<input type="button" value="save" id="savebtn">
<!-- 			<input type="button" value="Ok" name="ok" id="okbtn" /> -->
			<input type="button" value="concel" id="cancelbtn">
		</div>
	</div>
	<?php  echo js("js/libs/jquery-1.11.0")?>
	<?php  echo js("tinymce/tinymce.min")?>
	<?php  echo js("js/libs/jquery-ui-1.10.4.custom")?>
	<?php  echo js("js/map/image-map")?>
	
</body>

</HTML>


